function UI() {}

// Elements
UI.menu = null
UI.mainarea = null
UI.canvas = null

// Sections
UI.projectSection = null
UI.inspectorSection = null
UI.levelSection = null
UI.logSection = null

// Tabs
UI.projectTabs = null
UI.inspectorTabs = null
UI.levelTabs = null
UI.logTabs = null

// Panels
UI.classPanel = null
UI.projectPanel = null

UI.componentsPanel = null
UI.inspectorPanel = null

UI.elementPanel = null
UI.sideMaterialPanel = null

UI.levelPanel = null
UI.materialPanel = null

UI.logPanel = null

UI.initialise = () => {
  LiteGUI.init()

  UI.menu = new LiteGUI.Menubar()

  // UI Menu
  UI.menu.add("File/New", { callback: () => {
    Editor.createNewProgram()
  } })

  UI.menu.add("File/Save")
  UI.menu.add("File/Save As")
  UI.menu.add("File/Open")
  UI.menu.add("File/Import")
  UI.menu.add("File/Export")

  UI.menu.add("Edit/Preferences")
  UI.menu.add("Edit/Undo")
  UI.menu.add("Edit/Redo")
  UI.menu.add("Edit/Copy")
  UI.menu.add("Edit/Cut")
  UI.menu.add("Edit/Paste")

  UI.menu.add("Tool/Select", { callback: () => {
    Editor.toolMode = Editor.MODE_SELECT
  } })
  UI.menu.add("Tool/Move", { callback: () => {
    Editor.toolMode = Editor.MODE_MOVE
  } })
  UI.menu.add("Tool/Rotate", { callback: () => {
    Editor.toolMode = Editor.MODE_ROTATE
  } })
  UI.menu.add("Tool/Resize", { callback: () => {
    Editor.toolMode = Editor.MODE_RESIZE
  } })

  UI.menu.add("Add/Geometry/Cube", { callback: () => {
    var geometry = new THREE.BoxGeometry(1, 1, 1)
    var material = new THREE.MeshPhongMaterial()
    var model = new Element(geometry, material)
    Editor.addToActualLevel(model)
  } })

  UI.menu.add("Add/Geometry/Cylinder", { callback: () => {
    var geometry = new THREE.CylinderGeometry(1, 1, 2, 32)
    var material = new THREE.MeshPhongMaterial()
    var model = new Element(geometry, material)
    Editor.addToActualLevel(model)
  } })

  UI.menu.add("Add/Geometry/Sphere", { callback: () => {
    var geometry = new THREE.SphereGeometry(0.6, 16, 16)
    var material = new THREE.MeshPhongMaterial()
    var sphere = new Element(geometry, material)
    Editor.addToActualLevel(sphere)
  } })

  UI.menu.add("Add/Geometry/Torus", { callback: () => {
    var geometry = new THREE.TorusGeometry(1, 0.5, 16, 100)
    var material = new THREE.MeshPhongMaterial()
    var model = new Element(geometry, material)
    Editor.addToActualLevel(model)
  } })

  UI.menu.add("Add/Geometry/Pyramid", { callback: () => {
    var geometry = new THREE.CylinderGeometry(0, 1, 2, 32)
    var material = new THREE.MeshPhongMaterial()
    var model = new Element(geometry, material)
    Editor.addToActualLevel(model)
  } })

  UI.menu.add("Add/Lights/Point", { callback: () => {
    Editor.addToActualLevel(new PointLight())
  } })

  UI.menu.add("Add/Lights/Ambient", { callback: () => {
    Editor.addToActualLevel(new AmbientLight())
  } })

  UI.menu.add("Add/Lights/Spot", { callback: () => {
    Editor.addToActualLevel(new SpotLight())
  } })

  UI.menu.add("Add/Lights/Directional", { callback: () => {
    Editor.addToActualLevel(new DirectionalLight())
  } })

  UI.menu.add("Project/Add Level")
  UI.menu.add("Project/Execute Script")

  UI.menu.add("About")

  UI.menu.add("Run", { callback: () => {
    var menu = UI.menu.findMenu("Run")

    if (menu !== null) {
      menu.name = "Stop"

      Editor.state = Editor.STATE_TESTING

      UI.menu.updateMenu()
    } else {
      menu = UI.menu.findMenu("Stop")
      menu.name = "Run"

      Editor.state = Editor.STATE_EDITING

      UI.menu.updateMenu()
    }
  } })

  LiteGUI.add(UI.menu)

  // Main area
  UI.mainarea = new LiteGUI.Area({
                                  id: "mainarea",
                                  content_id: "workspace",
                                  main: true,
                                  inmediateResize: true,
                                  height: "calc( 100% - 25px )"
                                 })
  LiteGUI.add(UI.mainarea)

  UI.mainarea.split("horizontal", [null, 320], true)

  // Creating sections
  UI.projectSection = UI.mainarea.getSection(0)
  UI.inspectorSection = UI.mainarea.getSection(1)
  UI.projectSection.split("horizontal", [320, null], true)
  UI.levelSection = UI.projectSection.getSection(1)
  UI.levelSection.split("vertical", [null, 120], false)
  UI.logSection = UI.levelSection.getSection(1)

  UI.projectTabs = new LiteGUI.Tabs({ size: "full" })
  UI.projectTabs.addTab("Class", { size: "full" })
  UI.projectTabs.addTab("Project", { selected: true, size: "full" })
  UI.projectSection.add(UI.projectTabs)

  UI.classPanel = new LiteGUI.Panel({
                                    title: "Class",
                                    width: "100%",
                                    height: "100%"
                                   })
  UI.projectTabs.getTabContent("Class").appendChild(UI.classPanel.root)

  UI.projectPanel = new LiteGUI.Panel({
                                    title: "Project",
                                    width: "100%",
                                    height: "100%"
                                   })
  UI.projectTabs.getTabContent("Project").appendChild(UI.projectPanel.root)

  UI.inspectorTabs = new LiteGUI.Tabs({ size: "full" })
  UI.inspectorTabs.addTab("Components", { size: "full" })
  UI.inspectorTabs.addTab("Inspector", { size: "full", selected: true })
  UI.inspectorTabs.addTab("Element", { size: "full" })
  UI.inspectorTabs.addTab("Material", { size: "full" })
  UI.inspectorSection.add(UI.inspectorTabs)

  UI.componentsPanel = new LiteGUI.Panel({
                                    title: "Components",
                                    width: "100%",
                                    height: "100%"
                                   })
  UI.inspectorTabs.getTabContent("Components").appendChild(UI.componentsPanel.root)

  UI.inspectorPanel = new LiteGUI.Panel({
                                    title: "Inspector",
                                    width: "100%",
                                    height: "100%"
                                   })
  UI.inspectorTabs.getTabContent("Inspector").appendChild(UI.inspectorPanel.root)

  var tree = {
    id: "Level",
    children: [
      { id: "UUID1", content: "Cube" },
      { id: "UUID2", content: "Cube" },
      { id: "UUID4", content: "Model", children: [
        { id: "Rig" },
        { id: "Useful Things" }
      ]},
      { id: "UUID3", content: "Object" }
    ]
  }

  var litetree = new LiteGUI.Tree(tree, {
                                    allow_rename: true,
                                    allow_drag: true
                                  })
  UI.inspectorPanel.add(litetree)

  UI.elementPanel = new LiteGUI.Panel({
                                    title: "Element",
                                    width: "100%",
                                    height: "100%"
                                   })
  UI.inspectorTabs.getTabContent("Element").appendChild(UI.elementPanel.root)

  UI.sideMaterialPanel = new LiteGUI.Panel({
                                    title: "Material",
                                    width: "100%",
                                    height: "100%"
                                   })
  UI.inspectorTabs.getTabContent("Material").appendChild(UI.sideMaterialPanel.root)

  UI.levelTabs = new LiteGUI.Tabs({ size: "full" })
  UI.levelTabs.addTab("Level", { selected: true, size: "full"})
  UI.levelTabs.addTab("Material", { size: "full" })
  UI.levelSection.add(UI.levelTabs)

  UI.levelPanel = new LiteGUI.Panel({
                                    title: "level",
                                    width: "100%",
                                    height: "100%"
                                   })
  UI.levelTabs.getTabContent("Level").appendChild(UI.levelPanel.root)

  UI.canvas = document.createElement("canvas")
  UI.canvas.id = "canvas"
  Engine.canvas = UI.canvas
  UI.levelPanel.content.appendChild(UI.canvas)

  UI.materialPanel = new LiteGUI.Panel({
                                    title: "Material",
                                    width: "100%",
                                    height: "100%"
                                   })
  UI.levelTabs.getTabContent("Material").appendChild(UI.materialPanel.root)

  UI.logTabs = new LiteGUI.Tabs({ size: "full" })
  UI.logTabs.addTab("Log", { selected: true, size: "full" })
  UI.logSection.add(UI.logTabs)

  UI.logPanel = new LiteGUI.Panel({
                                    title: "Log",
                                    width: "100%",
                                    height: "100%"
                                   })
  UI.logTabs.getTabContent("Log").appendChild(UI.logPanel.root)

  UI.resize()
}

UI.resize = () => {
  var w = UI.levelSection.getWidth()
  var h = UI.levelSection.getSection(0).getHeight()

  UI.canvas.width = w
  UI.canvas.height = h
}
